<template>
  <section class="mod-flow">
    <div class="com-btn-group">
      <button class="btn btn-flow" :class="{'active': currBtn === 'view'}" 
        @click.prevent="onClickAction('view')"><i class="fa fa-mouse-pointer"></i></button>
      <button class="btn btn-flow" :class="{'active': currBtn === 'must'}"
        @click.prevent="onClickAction('must')">必审</button>
      <button class="btn btn-flow" :class="{'active': currBtn === 'pass'}"
        @click.prevent="onClickAction('pass')">传审</button>
      <button class="btn btn-flow" :class="{'active': currBtn === 'link'}"
        @click.prevent="onClickAction('link')"><i class="fa fa-link"></i></button>
    </div>
    <com-flow-chart ref="flow" :states="defaultStates" :links="defaultLinks"
      @addState="onAddState" @clickNode="onClickNode"></com-flow-chart>
    <com-tab v-model="currTab">
      <a data-tag="tag1" href="#" @click.prevent="currTab = 'tag1'">节点</a>
      <a data-tag="tag2" href="#" @click.prevent="currTab = 'tag2'">链接</a>
    </com-tab>
    <article>
      {{currState}}
    </article>
  </section>
</template>
<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import ComFlowChart from '@/components/flowchart/ComFlowChart.vue'
import { StateConfig, LinkConfig } from '@/components/flowchart/com-flow-chart-types'
import ComTab, { TabConfig } from '@/components/tabs/ComTab.vue'
import { ApproveState, ApproveLink, ApproveType } from './approve-flow-types'
import { getApproveFlow } from '@/services/approve-service';

@Component({
  name: 'approve-flow',
  components: { ComFlowChart, ComTab },
})
export default class ApproveFlow extends Vue {
  defaultStates: Array<ApproveState> = []
  defaultLinks: Array<ApproveLink> = []
  currTab: 'node' | 'link' = 'node'
  currBtn: string = 'view'
  states: { [key: string]: ApproveState } = {}
  links: { [key: string]: ApproveLink } = {}
  currStateKey: string = ''

  get currState (): ApproveState {
    return this.states[this.currStateKey]
  }

  onClickAction (action: 'view' | 'must' | 'pass' | 'link') {
    switch (action) {
      case 'view':
        this.currBtn = 'view'
        this.changeToViewMode()
        break
      case 'must':
        this.currBtn = 'must'
        this.changeToEditMode()
        break
      case 'pass':
        this.currBtn = 'pass'
        this.changeToEditMode()
        break
      case 'link':
        this.currBtn = 'link'
        this.changeToLinkMode()
        break
    }
  }

  onAddState (state: StateConfig) {
    this.states[state.key] = {
      ...state,
      approveType: this.convertBtnStr2ApproveType(this.currBtn)
    }
  }

  onClickNode (key: string) {
    this.currTab = 'node'
    this.currStateKey = key
  }

  created () {
    getApproveFlow().then(data => {
      this.defaultStates.push(data.start)
      this.defaultStates.push(...data.states)
      this.defaultLinks.push(...data.links)

      this.currTab = 'node'
      this.currBtn = 'view'

      this.states['start'] = data.start
      data.states.forEach(state => { this.states[state.key] = state })
      data.links.forEach(link => { this.links[link.key] = link })

        ; (this.$refs.flow as ComFlowChart).reset();
    })
  }

  private changeToEditMode () {
    ; (this.$refs.flow as ComFlowChart).editMode()
  }

  private changeToViewMode () {
    ; (this.$refs.flow as ComFlowChart).viewMode()
  }

  private changeToLinkMode () {
    ; (this.$refs.flow as ComFlowChart).linkMode()
  }

  private convertBtnStr2ApproveType (btn: string): ApproveType {
    if (btn === 'pass') {
      return 'pass'
    } else {
      return 'must'
    }
  }
}
</script>
<style lang="less">
@import '../../styles/variable.less';
@import url('../../styles/global.less');

.mod-flow {
  .com-btn-group {
    padding: 10px 0;
    font-size: 16px;
    margin-bottom: 4px;
  }

  .btn-flow {
    background-color: @color-primary;
    border-color: @color-primary;
    color: #fff;
  }

  .btn-flow:hover,
  .btn-flow:focus {
    background-color: lighten(@color-primary, 5%);
    border-color: lighten(@color-primary, 5%);
    color: #fff;
  }

  .btn-flow.active {
    .btn.btn-save();
  }
}
</style>